<template>
    <div class="box">
        <div class="header">分类</div>

        <div class="kind_box">
            <!-- 侧边分类 -->
            <van-sidebar v-model="sidebarActive">
                <van-sidebar-item
                    v-for="item in categoryList"
                    :key="item"
                    :title="item"
                />
            </van-sidebar>

            <!-- 顶部品牌 -->
            <van-tabs v-model:active="tabsActive">
                <van-tab
                    v-for="item in brandList"
                    :key="item.brand"
                    :title="item.brand"                   
                >
                    <!-- 分类下某品牌内的所有商品 -->
                    <van-grid>
                        <van-grid-item
                            v-for="pro in proList"
                            :key="pro.proid"
                            :icon="pro.img1" 
                            :text="pro.proname" 
                        />
                    </van-grid>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import type { Ref } from "vue";
import { getCategoryList, getCategoryBrandList, getCategoryBrandProList } from "@/api/pro";

// 存储侧边分类的默认选中
const sidebarActive: Ref<number> = ref(0);
// 存储顶部品牌的默认选中
const tabsActive: Ref<number> = ref(0);

// 存储侧边分类的数据
const categoryList: Ref<string[]> = ref([]);
// 存储顶部品牌的数据
const brandList: Ref<{ brand: string }[]> = ref([]);
// 存储右边商品列表的数据
interface IProList {
    banners: string[];
    proid: string;
    category: string;
    brand: string;
    proname: string;
    originprice: number;
    sales: number;
    stock: number;
    desc: string;
    issale: number;
    isrecommend: number;
    discount: number;
    isseckill: number;
    img1: string;
    img2: string;
    img3: string;
    img4: string;
}
const proList: Ref<IProList[]> = ref([]);

//
// 获取分类列表
async function fn1() {
    const _categoryList = await getCategoryList();
    categoryList.value = _categoryList.data.data;
}
// 获取品牌列表
async function fn2() {
    const _brandList = await getCategoryBrandList({
        // category: categoryList.value[0]
        category: categoryList.value[sidebarActive.value],
    });
    brandList.value = _brandList.data.data;
}
// 获取商品列表
async function fn3() {
    const _proList = await getCategoryBrandProList({
        category: categoryList.value[sidebarActive.value],
        brand: brandList.value[tabsActive.value].brand
    })
    proList.value = _proList.data.data
}


// 组件挂载完毕后 请求数据
onMounted(async () => {
    // 获取分类列表
    // const _categoryList = await getCategoryList();
    // categoryList.value = _categoryList.data.data;
    await fn1()

    // 获取品牌列表
    // const _brandList = await getCategoryBrandList({
    //     // category: categoryList.value[0]
    //     category: categoryList.value[sidebarActive.value],
    // });
    // brandList.value = _brandList.data.data;
    await fn2()

    // 获取商品列表
    // const _proList = await getCategoryBrandProList({
    //     category: categoryList.value[sidebarActive.value],
    //     brand: brandList.value[tabsActive.value].brand
    // })
    // proList.value = _proList.data.data
    await fn3()
});

//侦听侧边
watch(sidebarActive, async () => {
    // console.log(sidebarActive.value);
    tabsActive.value = 0
    await fn2()
    await fn3()
    
})

//侦听顶部品牌
watch(tabsActive, async () => {
    // console.log(tabsActive.value);
    await fn3()
})
</script>

<style scoped lang="scss">
.kind_box {
    display: flex;

    .van-tabs {
        flex: 1;
    }
}
</style>